{% extends "base.html" %}

{% block scripts %}
<script>
function replayGame(gameId, gameMode) {
    let url;
    if (gameMode === 'spell') {
        url = `/game_spell?game_id=${gameId}`;
    } else if (gameMode === 'translate') {
        url = `/game_translate?game_id=${gameId}`;
    } 
    window.location.href = url;
}
</script>
{% endblock %}

{% block content %}
<div class="profile-container">
    <div class="stats-summary">
        <div class="stat-item">
            <span class="stat-label">Total Games</span>
            <span class="stat-value">{{ total_games }}</span>
        </div>
        <div class="stat-item">
            <span class="stat-label">Total Score</span>
            <span class="stat-value">{{ total_score }}</span>
        </div>
        <div class="stat-item">
            <span class="stat-label">Average Completion</span>
            <span class="stat-value">{{ average_completion * 100 }}%</span>
        </div>
    </div>

    <div class="game-records">
        {% if grouped_records %}
            {% for date, records in grouped_records.items() %}
            <div class="date-group">
                <h2>{{ date }}</h2>
                <div class="record-table">
                    {% if loop.first %}
                    <div class="record-row header">
                        <div class="record-cell record-time">time</div>
                        <div class="record-cell record-title">Title</div>
                        <div class="record-cell record-description">Description</div>
                        <div class="record-cell record-score">Score</div>
                        <div class="record-cell record-completion">Completion</div>
                        <div class="record-cell record-action"></div>
                    </div>
                    {% endif %}
                    {% for record in records %}
                    <div class="record-row">
                        <div class="record-cell record-time">{{ record.GameRecord.completed_at.strftime('%H:%M') }}</div>
                        <div class="record-cell record-title">{{ record.game_title }} ({{ record.GameRecord.game_mode }})</div>
                        <div class="record-cell record-description">{{ record.game_description }}</div>
                        <div class="record-cell record-score">{{ record.GameRecord.score }}</div>
                        <div class="record-cell record-completion">{{ record.GameRecord.completion_rate * 100 }}%</div>
                        <div class="record-cell record-action">
                            <button class="replay-btn" onclick="replayGame('{{ record.GameRecord.game_id }}', '{{ record.GameRecord.game_mode }}')">
                                <i class="fas fa-redo"></i> Replay
                            </button>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endfor %}
            <div class="record-note" style="font-size: 0.8em; color: #fff; text-align: center; margin-top: 15px;">
                Showing the most recent 100 records
            </div>
        {% else %}
            <div class="no-history">
                <h2>No History</h2>
                <h2>Start your journey...</h2>
                <div class="journey-buttons">
                    <a href="/game_spell" class="journey-btn">Spell</a>
                    <a href="/game_translate" class="journey-btn">Translate</a>
                </div>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}

